<template>
	<view>
		<view v-if="car_list.length != 0">
			<view class="add_adress_box" v-if="JSON.stringify(adress_obj) === '{}'">
				<button type="primary" @click="add_adress_fun">请选择收货地址+</button>
			</view>
			<view class="adress_info_box" v-else @click="add_new_adress_fun">
				<view class="top">
					<view class="">收货人: {{adress_obj.userName}}</view>
					<view class="phone">电话: {{adress_obj.telNumber}} <uni-icons class="icon" type="forward" size="22"></uni-icons></view>
				</view>
				<view class="bottom">
					收获地址: {{adress_str}}
				</view>
			</view>
			<image class="border_image" src="../../static/cart_border@2x.png" mode=""></image>
			<view class="ListBox">
				<view class="Listtitle">
					<uni-icons type="cart-filled" size="19"></uni-icons>
					<text>购物车</text>
				</view>
				<uni-swipe-action>
				<!-- 基础用法 -->
					<block v-for="item in car_list" :key="item.goods_id">
						<uni-swipe-action-item :right-options="options" @change="">
							<goodsListItem
							@checked_status_change="checked_status_change_fun" 
							@goodsCount_change="goodsCount_change_fun"
							@del_goods_inshopcar="del_goods_inshopcar_fun"
							:isshopcar="true" :item="item" >
							</goodsListItem>
						</uni-swipe-action-item>
					</block>
				</uni-swipe-action>
			</view>
			<my-settle @all_radio_change="all_radio_change_fun" class="com_settle_style"></my-settle>
		</view>
		<view class="no_goods_box" v-else>
			<image src="../../static/cart_empty@2x.png" mode=""></image>
			<view>空空如也~</view>
		</view>
	</view>
</template>

<script>
	import goodsListItem from '../../components/goodsListItem/goodsListItem.vue'
	import {mapState, mapGetters, mapMutations} from 'vuex'
	import tabbar_tip_number from '../../mixins/tabbar_tip_number.js'
	export default {
		mixins: [tabbar_tip_number],
		computed:{
			...mapState('m_shopCar', ['car_list']),
			...mapState('m_user', ['adress_obj']),
			...mapGetters('m_user', ['adress_str']),
		},
		data() {
			return {
				options:[
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		methods: {
			...mapMutations('m_shopCar', ['goods_count_chang', 'goods_state_chang', 'del_shopCar_goods', 'all_radio_change']),
			...mapMutations('m_user', ['set_adress']),
			goodsCount_change_fun(val, goods) {
				this.goods_count_chang({count:val, goods:goods});
				uni.setTabBarBadge({
					index: 2,
					text: this.goods_totle + ''
				})
			},
			checked_status_change_fun({id, g_state}) {
				this.goods_state_chang({id, g_state});
			},
			del_goods_inshopcar_fun(id) {
				this.del_shopCar_goods(id);
			},
			async add_adress_fun() {
				const [err, succ] = await uni.chooseAddress({
					
				}).catch(err => err);
				if(err) {
					uni.showToast({
						title: '操作取消!'
					})
				}else {
					this.set_adress(succ);
				}
			},
			async add_new_adress_fun() {
				const [err, succ] = await uni.chooseAddress({
					
				}).catch(err => err);
				if(err) {
					uni.showToast({
						title: '未选择地址!'
					})
				}else {
					this.set_adress(succ);
				}
			},
			all_radio_change_fun(new_state) {
				this.all_radio_change(new_state);
			}
		},
		onLoad() {
		},
		components: {
			goodsListItem
		}
	}
</script>

<style lang="scss">
.ListBox {
	padding-top: 20rpx;
	padding-bottom: 80rpx;
	.Listtitle {
		margin-bottom: 30rpx;
		text {
			margin-left: 40rpx;
		}
	}
}
.add_adress_box {
	height: 180rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	button {
		font-size: 30rpx;
	}
}
.adress_info_box {
	padding: 30rpx 20rpx;
	box-sizing: border-box;
	.top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 45rpx;
		.phone {
			position: relative;
			margin-right: 20rpx;
			.icon {
				// width: 20rpx;
				// height: 20rpx;
				position: absolute;
				top: 0px;
				right: -20px;
			}
		}
	}
	
}
.com_settle_style {
	position: fixed;
	bottom: 0;
	z-index: 999;
	width: 100%;
}
.border_image {
	width: 100%;
	height: 20rpx;
}


.no_goods_box {
	image {
		display: block;
		width: 200rpx;
		height: 200rpx;
		margin: 350rpx auto 30rpx;
	}
	view {
		text-align: center;
		color: #999999;
		font-size: 40rpx;
	}
}
</style>
